import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col,
    Form, Checkbox, Switch, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Typography
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
    AlipayOutlined,
    WechatOutlined,
    MailOutlined,
    PhoneOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
const { Text } = Typography;
const layout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
};
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            EPay: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values)
    }
    render() {
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Row gutter={[16, 16]}>
                        <Col span={14}>
                            <Card>
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="明细" key="1">
                                        <Row gutter={[16, 16]}>
                                            <Col span={12}>
                                                <Form.Item name={['Vendor', 'VendorID']} label="客户编号"
                                                    rules={[{ required: true, message: "客户编号必填" }]}>
                                                    <Input style={{ width: 200 }} />
                                                </Form.Item>
                                                <Form.Item name={['Vendor', 'Name']} label="客户名称"
                                                    rules={[{ required: true, message: "客户名称必填" }]}>
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item name={['Vendor', 'TaxRegionCode']} label="应纳税"
                                                    rules={[{ required: true, message: "应纳税必填" }]}>
                                                    <Select style={{ width: 200 }}></Select>
                                                </Form.Item>
                                                <Form.Item name={['Vendor', 'TermsCode']} label="付款条款"
                                                    rules={[{ required: true, message: "付款条款必选" }]}>
                                                    <Select style={{ width: 200 }}></Select>
                                                </Form.Item>
                                                <Form.Item name={['Vendor', 'ShipViaCode']} label="运输方法"
                                                    rules={[{ required: true, message: "运输方法必选" }]}>
                                                    <Select style={{ width: 200 }}></Select>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['Vendor', 'GlobalLock']}
                                                            valuePropName="checked">
                                                            <Checkbox>全局锁定</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'GlobalVendor']}
                                                            valuePropName="checked">
                                                            <Checkbox>全局供应商</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'ConsolidatedPurchasing']}
                                                            valuePropName="checked">
                                                            <Checkbox>统一采购</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'Approved']}
                                                            valuePropName="checked">
                                                            <Checkbox>核准</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'Inactive']}
                                                            valuePropName="checked">
                                                            <Checkbox>无效</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'PayHold']}
                                                            valuePropName="checked">
                                                            <Checkbox>冻结付款</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'Network']}
                                                            valuePropName="checked">
                                                            <Checkbox>网络采购</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'ElecPayment']}
                                                            valuePropName="checked">
                                                            <Checkbox>电子付款</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['Vendor', 'RcvInspectionReq']}
                                                            valuePropName="checked">
                                                            <Checkbox>需要审查</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item name={['Vendor', 'MinOrderValue']} label="最少订单量">
                                                    <InputNumber min={0} />
                                                </Form.Item>
                                            </Col>
                                        </Row>

                                    </TabPane>
                                    <TabPane tab="采购点" key="2">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item
                                                    label="采购点"
                                                    name={['VendorPP', 'PurPoint']}>
                                                    <Input style={{ width: 200 }} />
                                                </Form.Item>
                                                <Form.Item
                                                    label="名称"
                                                    name={['VendorPP', 'Name']}>
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item label="国家/地区">
                                                    <Input.Group compact>
                                                        <Form.Item noStyle name={['VendorPP', 'CountryNum']}>
                                                            <Select placeholder="国家"></Select>
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['VendorPP', 'State']}>
                                                            <Select placeholder="省/州"></Select>
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['VendorPP', 'City']}>
                                                            <Select placeholder="城市"></Select>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item
                                                    label="地址"
                                                    name={['VendorPP', 'Address']}>
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item
                                                    wrapperCol={{ offset: 5 }}
                                                    name={['VendorPP', 'EBuy']}
                                                    valuePropName="checked">
                                                    <Checkbox>网络采购</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    label="采购平台"
                                                    name={['VendorPP', 'Website']}>
                                                    <Input prefix="http://" />
                                                </Form.Item>

                                            </Col>
                                        </Row>

                                    </TabPane>
                                    <TabPane tab="联系人" key="3">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['VendCnt', 'WebUser']}
                                                            valuePropName="checked">
                                                            <Checkbox>网络联系人</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            name={['VendCnt', 'Inactive']}
                                                            valuePropName="checked">
                                                            <Checkbox>无效</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="国家/地区">
                                                    <Input.Group compact>
                                                        <Form.Item noStyle name={['VendCnt', 'CountryNum']}>
                                                            <Select placeholder="国家"></Select>
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['VendCnt', 'State']}>
                                                            <Select placeholder="省/州"></Select>
                                                        </Form.Item>
                                                        <Form.Item noStyle name={['VendCnt', 'City']}>
                                                            <Select placeholder="城市"></Select>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item name={['VendCnt', 'Address']} label="联系地址">
                                                    <Input.TextArea />
                                                </Form.Item>
                                                <Form.Item name={['VendCnt', 'Email']} label="电子邮件">
                                                    <Input prefix={<MailOutlined />} />
                                                </Form.Item>

                                            </Col>
                                            <Col span={12}>
                                                <Form.Item name={['VendCnt', 'Name']} label="联系人">
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item name={['VendCnt', 'PhoneNum']} label="电话">
                                                    <Input prefix={<PhoneOutlined />} />
                                                </Form.Item>
                                                <Form.Item name={['VendCnt', 'CellPhoneNum']} label="手机">
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item name={['VendCnt', 'FaxNum']} label="传真">
                                                    <Input />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </TabPane>
                                    <TabPane tab="备注" key="4">
                                        <Form.Item
                                            wrapperCol={24}
                                            name={['Vendor', 'CommentText']} >
                                            <Input.TextArea rows={10} />
                                        </Form.Item>
                                    </TabPane>
                                    <TabPane tab="银行/收款" key="5">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            noStyle
                                                            name={['VendorBank', 'EPay']}
                                                            valuePropName="checked">
                                                            <Checkbox onChange={(e) => { this.setState({ EPay: e.target.checked }); }}>网络支付</Checkbox>
                                                        </Form.Item>
                                                        <Form.Item
                                                            noStyle
                                                            name={['VendorBank', 'Inactive']}
                                                            valuePropName="checked">
                                                            <Checkbox>无效</Checkbox>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="银行" style={{ marginBottom: 0 }}>
                                                    <Input.Group compact>
                                                        <Form.Item name={['VendorBank', 'BankID']}>
                                                            <Input placeholder="银行代码" disabled={this.state.EPay} />
                                                        </Form.Item>
                                                        <Form.Item name={['Bank', 'Description']}>
                                                            <Input placeholder="银行名称" disabled={this.state.EPay} />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="银行账户" name={['VendorBank', 'BankName']}>
                                                    <Input disabled={this.state.EPay} />
                                                </Form.Item>
                                                <Form.Item label="支付宝" name={['VendorBank', 'AlipayAcct']}>
                                                    <Input prefix={<AlipayOutlined />} disabled={!this.state.EPay} />
                                                </Form.Item>
                                                <Form.Item label="微信支付" name={['VendorBank', 'WePayAcct']}>
                                                    <Input prefix={<WechatOutlined />} disabled={!this.state.EPay} />
                                                </Form.Item>
                                            </Col>
                                        </Row>
                                    </TabPane>
                                </Tabs>

                            </Card>
                        </Col>
                        <Col span={10}>
                            <Card></Card>
                        </Col>
                    </Row>
                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;